<template>
	<div id="" class="home-rec-wrp">
		<h2>
			<em></em>
			热门推荐
		</h2>
		<div class="col-1">
			<ul>
				<li><a href="">曼谷</a></li>
				<li><a href="">巴黎岛</a></li>
				<li><a href="">大阪</a></li>
				<li><a href="">冲绳</a></li>
				<li><a href="">...</a></li>
			</ul>
		</div>
		<div class="col-2">
			<ul class="col-2-ul">
				<li v-for="(items , index)  in homeRec"  :key="items.id">
					<a href="" :class="cla(index)">
						<img class="col-2-img" :src="items.imgUrl"/>
						<span id="" class="col-2-spa">
							{{items.span}}
							<em class="col-2-em"></em>
						</span>
						<p class="col-2-p">{{items.p}}</p>
					</a>
				</li>
			</ul>
			<a href="" class="col-2-mor">查看更多玩法</a>
		</div>
	</div>
</template>

<script>
	export default{
		props:{
			homeRec:Array
		}
//		data(){
//			return {
//				mess:[
//					{
//						id:'001',
//						imgUrl:"//pic4.40017.cn/poi/2017/03/16/16/wony5c_300x200_00.jpg",
//						span:"古镇",
//						p:"今年最火的10大古镇"
//					},
//					{
//						id:'002',
//						imgUrl:"http://pic5.40017.cn/01/000/07/9e/rBLkBlnoZ5CAd5s8AAGoaencbUU275_300x200_00.jpg",
//						span:"海岛",
//						p:"适合秋冬出游的海岛"
//					},
//					{
//						id:'003',
//						imgUrl:"http://pic5.40017.cn/01/001/04/14/rBLkBVnnEiaADQysAAD4v4j0QKY062_300x200_00.jpg",
//						span:"自驾游",
//						p:"中国8大经典自驾线路	"
//					}
//					,
//					{
//						id:'004',
//						imgUrl:"https://pic4.40017.cn/poi/2016/09/28/20/jfN5UH_300x200_00.jpg",
//						span:"盘点",
//						p:"10月旅行目的地推荐"
//					}
//				
//				]
//			}
//		},
		,
		methods:{
			cla:function(index){
				if(index%2==0){
						return "col-2-a"
				} return "col-2-a  col-2-2a"
			}
		}
	}
</script>

<style lang="stylus" scoped>
.home-rec-wrp
	border-top:solid .2rem rgba(50,50,50,.033)
	padding-top:.4rem
	h2
		font-size:18px
		color:red
		text-align:center
	.col-1
		padding:.2rem .2rem .3rem .3rem
		border-bottom:solid 1px #eee
		ul
			display:flex
			flex-wrap:wrap
			justify-content:space-between
			align-items:center
			li
				padding:.2rem 0 0 0
				a
					display:inline-block
					height:.8rem
					background:#eee
					text-align:center
					line-height:.8rem
					width:1.5rem
					border-radius:.4rem
	.col-2
		margin:.3rem .1rem 0 .3rem
		text-align:center
		.col-2-ul
			display:flex
			justify-content:space-between
			flex-wrap:wrap
			li
				position:relative
				width:50%
				height:2rem
				box-sizing:border-box
				margin-top:.2rem
				overflow:hidden
				.col-2-a
					display:inline-block
					height:100%
					margin-right:.2rem
					border-radius:.1rem
					border:0
					overflow:hidden
					.col-2-img
						width:100%
					.col-2-p
						position:absolute
						bottom:0
						left:0
						color:white
						width:94.1%
						background:rgba(0,0,0,.4)
						height:.4rem
						line-height:.4rem
						border-radius:0 0 .2rem .2rem
					.col-2-spa
						position:absolute
						top:0
						left:0
						width:.8rem
						height:.3rem
						line-height:.3rem
						background-color:#fc5446
						color:white
						text-align:center
						font-size:12px
						border-radius:.1rem 0 0 0
						em
							position:absolute
							top:0
							right:-.2850rem
							border-top:.3rem solid #fc5446
							border-right:.3rem solid transparent
		.col-2-mor
			display:inline-block
			padding-top:.2rem
</style>